import React, { useEffect, useState } from 'react'
// 引入antd组件库中的相关组件
import { Card, Typography, InputNumber, Button, message, Form, Divider } from 'antd'
// 引入获取钱包余额和充值钱包的API服务
import { getWalletBalance, rechargeWallet } from '../services/api'

// 解构赋值获取Typography组件中的Title和Text组件
const { Title, Text } = Typography

/**
 * 钱包页面组件
 * 用于展示用户的钱包余额，并提供充值功能
 */
function WalletPage() {
  // 定义状态变量balance，用于存储钱包余额，初始值为0
  const [balance, setBalance] = useState(0)
  // 定义状态变量loading，用于控制页面加载状态，初始值为false
  const [loading, setLoading] = useState(false)
  // 使用Form.useForm()创建表单实例
  const [form] = Form.useForm()

  // 使用useEffect钩子，在组件挂载时调用fetchBalance函数获取钱包余额
  useEffect(() => {
    fetchBalance()
  }, [])

  /**
   * 获取钱包余额的异步函数
   * 调用getWalletBalance API获取余额信息
   */
  const fetchBalance = async () => {
    try {
      // 设置加载状态为true
      setLoading(true)
      // 调用API获取钱包余额
      const res = await getWalletBalance()
      // 如果API返回成功
      if (res.data.success) {
        // 更新钱包余额状态
        setBalance(res.data.data.balance)
      }
    } catch (e) {
      // 若出现错误，显示错误消息
      message.error('获取余额失败')
    } finally {
      // 无论成功或失败，都将加载状态设置为false
      setLoading(false)
    }
  }

  /**
   * 处理充值操作的异步函数
   * 调用rechargeWallet API进行充值
   * @param {Object} values - 表单提交的值，包含充值金额
   */
  const handleRecharge = async (values) => {
    try {
      // 设置加载状态为true
      setLoading(true)
      // 调用API进行充值
      const res = await rechargeWallet({ amount: values.amount })
      // 如果API返回成功
      if (res.data.success) {
        // 显示充值成功消息
        message.success('充值成功')
        // 更新钱包余额状态
        setBalance(res.data.data.balance)
        // 重置表单字段
        form.resetFields()
      } else {
        // 若充值失败，显示错误消息
        message.error(res.data.message || '充值失败')
      }
    } catch (e) {
      // 若出现错误，显示错误消息
      message.error(e.response?.data?.message || '充值失败')
    } finally {
      // 无论成功或失败，都将加载状态设置为false
      setLoading(false)
    }
  }

  return (
    <div style={{ marginTop: 64, marginLeft: 200, minHeight: 'calc(100vh - 64px)', padding: 24 }}>
      {/* 使用Card组件包裹内容，设置加载状态和样式 */}
      <Card style={{ maxWidth: 500, margin: '0 auto' }} loading={loading}>
        {/* 显示钱包页面标题 */}
        <Title level={3}>我的钱包</Title>
        {/* 添加分割线 */}
        <Divider />
        {/* 显示当前余额标签 */}
        <Text strong>当前余额：</Text>
        {/* 显示当前余额，使用绿色字体 */}
        <span style={{ fontSize: 28, color: '#52c41a', marginLeft: 8 }}>￥{balance}</span>
        {/* 添加分割线 */}
        <Divider />
        {/* 创建表单，设置表单实例和提交处理函数 */}
        <Form
          form={form}
          layout="inline"
          onFinish={handleRecharge}
        >
          {/* 表单字段，用于输入充值金额 */}
          <Form.Item
            name="amount"
            rules={[
              // 充值金额为必填项
              { required: true, message: '请输入充值金额' },
              // 充值金额必须为1到5000之间的数字
              { type: 'number', min: 1, max: 5000, message: '充值金额1~5000元' },
              // 充值金额必须为整数
              { type: 'integer', message: '必须为整数', transform: v => Number(v) }
            ]}
          >
            {/* 使用InputNumber组件输入充值金额 */}
            <InputNumber min={1} max={5000} step={1} precision={0} placeholder="充值金额" style={{ width: 160 }} />
          </Form.Item>
          {/* 表单字段，包含充值按钮 */}
          <Form.Item>
            {/* 充值按钮，设置为主要按钮，点击时提交表单 */}
            <Button type="primary" htmlType="submit" loading={loading}>充值</Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

// 导出钱包页面组件
export default WalletPage 